<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客-视频</title>
  <link rel="stylesheet" href="css/video.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<!--内容-->
<div class="content">
  <div class="home-main">
    <div class="home-wrapper">

      <!--顶部-->
      <div class="scroll-wrapper">
        <div class="video-box has-dots">
          <ul>
            <li>
              <img src="images/5.jpg" alt="" width="440" height="220">
            </li>
            <li>
              <img src="images/6.jpg" alt="" width="440" height="220">
            </li>
            <li>
              <img src="images/7.jpg" alt="" width="440" height="220">
            </li>
          </ul>

          <div class="unslider-arrow prev"></div>
          <div class="unslider-arrow next"></div>
        </div>

        <div class="video_top">
          <div class="item-wrapper">
            <ul>

              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>
              <li class="item">
                <img src="images/10.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item-mask"></div></a>
                <div class="item-title">{{$item->title}}</div>
                <div class="info">
                  <p class="up">up: {{$item->user->nickname}}</p>
                  <p class="play">播放量1: {{$item->see}}</p>
                </div>
              </li>

            </ul>
          </div>
        </div>
      </div>

      <!--类别-->
      <div class="select-animation" style="margin-top: 40px">
        <div class="select-wrapper">
          <div class="left">
            <div class="select_header_wrapper">
              <img class="img" src="images/7.jpg" width="40" height="40">
              <h1 class="title">动画</h1>
              <div class="new_info">
                <div class="new new_action">有关动态</div>
                <div class="new new_video">最新投稿</div>
                <div class="new_action_info">
                  <span class="icon icon-fire"></span>
                  <span class="info">关爱动画</span>
                </div>

                <div class="more_data">
                  <div class="change_video">
                    <span class="icon-loop2"></span>
                    <span>5565条更新数据</span>
                  </div>
                  <div class="more">
                    <span>更多</span>
                    <span class="el-icon-arrow-right"></span>
                  </div>
                </div>

              </div>
            </div>

            <div class="selectItem-wrapper">

              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>



            </div>


          </div>
          <div class="right">
            <div class="selectTop">
              <div class="header">
                <h1>排行</h1>
                <div class="new_date">3日<span class="icon el-icon-arrow-down"></span></div>
              </div>

              <div class="top">
                <div class="more">查看更多<span class="icon el-icon-arrow-right"></span></div>


                <div  class="item">
                  <i class="no">0</i>
                  <div class="top_one">
                    <a href="video_detail.html"><img src="images/10.jpg" width="88" height="58"></a>

                    <div class="info">
                      <a href="video_detail.html"><h1 class="title" >1</h1></a>
                      <a href="video_detail.html"><span class="score">综合评分: ss</span></a>
                    </div>
                  </div>

                </div>

                <div  class="item">
                  <i class="no">2</i>
                  <a href="cccc"><span  class="title" >qwqeqw</span></a>
                </div>



              </div>
            </div>
          </div>

        </div>
      </div>

      <!--类别-->
      <div class="select-animation" style="margin-top: 40px">
        <div class="select-wrapper">
          <div class="left">
            <div class="select_header_wrapper">
              <img class="img" src="images/7.jpg" width="40" height="40">
              <h1 class="title">鬼畜</h1>
              <div class="new_info">
                <div class="new new_action">有关动态</div>
                <div class="new new_video">最新投稿</div>
                <div class="new_action_info">
                  <span class="icon icon-fire"></span>
                  <span class="info">关爱动画</span>
                </div>

                <div class="more_data">
                  <div class="change_video">
                    <span class="icon-loop2"></span>
                    <span>5565条更新数据</span>
                  </div>
                  <div class="more">
                    <span>更多</span>
                    <span class="el-icon-arrow-right"></span>
                  </div>
                </div>

              </div>
            </div>

            <div class="selectItem-wrapper">

              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>
              <div class="item" >
                <img class="thumb" src="images/8.jpg" width="160" height="100">
                <a href="video_detail.html"><div class="item_mask"></div></a>
                <div class="title">asdsa</div>
                <div class="info">
                  <div class="see">
                    <span class="fa fa-comments"></span>
                    <span>asdsada</span>
                  </div>
                  <div class="commit">
                    <span class="fa fa-eye"></span>
                    <span>886</span>
                  </div>
                </div>
              </div>



            </div>


          </div>
          <div class="right">
            <div class="selectTop">
              <div class="header">
                <h1>排行</h1>
                <div class="new_date">3日<span class="icon el-icon-arrow-down"></span></div>
              </div>

              <div class="top">
                <div class="more">查看更多<span class="icon el-icon-arrow-right"></span></div>


                <div  class="item">
                  <i class="no">0</i>
                  <div class="top_one">
                    <a href="video_detail.html"><img src="images/10.jpg" width="88" height="58"></a>

                    <div class="info">
                      <a href="video_detail.html"><h1 class="title" >1</h1></a>
                      <a href="video_detail.html"><span class="score">综合评分: ss</span></a>
                    </div>
                  </div>

                </div>

                <div  class="item">
                  <i class="no">2</i>
                  <a href="video_detail.html"><span  class="title" >qwqeqw</span></a>
                </div>



              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="js/unslider.js"></script>
<script>
  $(function() {

    var unslider = $('.video-box').unslider({
      speed: 500,               //  The speed to animate each slide (in milliseconds)
      delay: 5000,              //  The delay between slide animations (in milliseconds)
      complete: function() {},  //  A function that gets called after every slide animation
      keys: true,               //  Enable keyboard (left, right) arrow shortcuts
      dots: true,               //  Display dot navigation
      fluid: false              //  Support responsive design. May break non-responsive designs
    });

    $('.unslider-arrow').click(function() {
      var fn = this.className.split(' ')[1];
      unslider.data('unslider')[fn]();
    });
  });
</script>
</html>